<template>
  <div>
    <a-modal title="项目设置" :visible="visible" @cancel="visible=false" :footer="null"  style="top: 160px;"  @confirmLoading="modelLoading">
      <div style="margin-bottom: 16px">
        <a-button type="primary" @click="eaVisible=true;type='add'">添加</a-button>
        <!-- 添加/编辑 -->
        <a-modal :title="type=='add'?'添加项目':'编辑项目'" :visible="eaVisible" okText="确认" @cancel="eaVisible=false" width="450px" :confirmLoading="modalBtnLoading" @ok="modalAe('formData')" style="top: 220px;" >
          <a-form-model :model="formData" :rules="rules" :label-col="{span:4}" :wrapper-col="{span:16}" ref="formData" v-if="eaVisible">
            <a-form-model-item label="名称" prop="name">
              <a-input v-model="formData.name" style="width:200px" placeholder="请输入名称"/>
            </a-form-model-item>
          </a-form-model>
        </a-modal>
      </div>
      <a-table :columns="columns" :dataSource="tableData" :showHeader="false"  :pagination="false" :loading="tableLoading" :rowKey="(record) => record.id"  class="noMarginTableComponent"  size="small" ref="subject_table">
        <!-- 名称 -->
        <span slot="name" slot-scope="text,record">
          <span>{{record.name}}</span>
          <span style="margin-left:20px;" v-if="record.source_type==0">
            <a-tag>系统默认</a-tag>
          </span>
        </span>
        <!-- 状态 -->
        <span slot="is_enable" slot-scope="text,record" class="t-flex t-flex-sb">
          <span></span>
          <a-switch :checked="text==1?true:false" @click="changeType(text,record)" />
        </span> 
        <!-- 操作 -->
        <div slot="action" slot-scope="record" >
          <a  class="t-margin-r1" href="javascript:;" @click="editProject(record)" v-if="record.source_type!=0">修改</a>
          <a-popconfirm title="确认删除该项目吗?" ok-text="确认" cancel-text="取消" @confirm="modalDel(record)" v-if="record.source_type!=0">
              <a href="#">删除</a>
            </a-popconfirm>
        </div>
      </a-table>
    </a-modal>
  </div>
</template>
<script>
import {expenseProjects,expenseProjectsAdd,expenseProjectsDel,expenseProjectsStatus,expenseProjectsEdit} from '@/api/finance'
import { deepClone } from '@/utils/pub_methods_base'
const columns = [
  {
    title: '名称',
    ellipsis: true,
    dataIndex: 'name',
    width: 250,
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '状态',
    dataIndex: 'is_enable',
    ellipsis: true,
    scopedSlots: { customRender: 'is_enable' }
  },
  {
    title: '操作',
    dataIndex: '',
    ellipsis: true,
    align: 'right',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  name: '',
  props: {},
  data() {
    return {
      edit_id:'',
      type:'add',
      visible: false, //项目列表弹窗
      eaVisible: false,  //增加编辑弹窗
      modalBtnLoading: false,  //增加按钮状态
      modelLoading: false,
      tableLoading: false,
      //表格数据
      tableData: [
        {
          name: '',
          is_enable: null
        }
      ],
      formData:{
        school_id:this.$store.state.user.school,
        name:'',
      },
      columns,
      selectedRowKeys: [],
       rules:{
        name: [{ required: true, message: '请输人名称', trigger: 'change' }],
      },
    }
  },
  watch:{
    'eaVisible':function(val){
      if(!val){
        this.formData={
          school_id:this.$store.state.user.school,
          name:''
        }
      }
    }
  },
  methods: {
    expenseProjects() {
      this.tableLoading = true
      expenseProjects({ pageSize: 999999,school_id:this.$store.state.user.school,is_show:1}).then(res => {
        let params = JSON.parse(JSON.stringify(res))
        this.tableData = res.data
        // params.sort(this.sortNumber)
        this.tableLoading = false
      })
    },
    //添加/编辑项目
    modalAe(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.modalBtnLoading = true
          this.tableLoading = true
          if(this.type=='add'){
            //添加
            expenseProjectsAdd(this.formData)
            .then(res => {
              this.modalBtnLoading = false
              this.eaVisible=false
              this.$message.success('添加成功')
              this.expenseProjects()
              this.$emit('eaReload')
            })
            .catch(err => {
              this.modalBtnLoading = false
              this.eaVisible=false
              this.tableLoading = false
              this.$message.error( err.data.message ||'添加失败')
            })
          }else{
            //编辑
            expenseProjectsEdit(this.edit_id,this.formData)
            .then(res => {
              this.modalBtnLoading = false
              this.eaVisible=false
              this.$message.success('编辑成功')
              this.expenseProjects()
              this.$emit('eaReload')
            })
            .catch(err => {
              this.modalBtnLoading = false
              this.eaVisible=false
              this.tableLoading = false
              this.$message.error( err.data.message ||'编辑失败')
            })
          }
          
        }
      })
      
    },
    //删除项目
    modalDel(e) {
     expenseProjectsDel(e.id)
        .then(res => {
          this.$message.success('删除成功')
          this.expenseProjects()
          this.$emit('eaReload')
        })
        .catch(err => {
          this.$message.error( err.data.message ||'删除失败')
        })
    },
    //更改状态
    changeType(status, e) {
      this.tableLoading = true
      if (status == 2 || status == null) {
        expenseProjectsStatus(e.id,{ is_enable: 1 })
          .then(res => {
            this.expenseProjects()
            this.$emit('eaReload')
          })
          .catch(err => {
            this.tableLoading = false
            this.$message.error( '更新状态失败')
          })
      } else {
        expenseProjectsStatus(e.id,{ is_enable: 2 })
          .then(res => {
            this.expenseProjects()
            this.$emit('eaReload')
          })
          .catch(err => {
            this.tableLoading = false
            this.$message.error(err.data.message || '更新状态失败')
          })
      }
    },
    //弹框事件
    showModal() {
      this.expenseProjects()
      this.visible = true
    },
    //编辑项目
    editProject(e) {
      this.eaVisible = true
      this.type='edit'
      this.formData.name=e.name
      this.edit_id=e.id
    }
  }
}
</script>
<style lang="less">
.noMarginTableComponent {
  max-height: 300px;
  overflow-y: auto;
  .ant-table-body {
    margin: 0 !important;
  }
}
</style>